<template>
	<div>
		<!-- 导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>地址列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card class="box-card">
			<!-- 搜索框 -->
			<el-row :gutter="40">
				<el-col :span="7">
					<el-input type="text" placeholder="请搜索姓名" v-model="query_info.query" clearable @clear="getaddresslist()">
						<el-button slot="append" icon="el-icon-search" @click="getaddresslist()">搜索</el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加地址</el-button>
				</el-col>
			</el-row>

			<!-- 地址列表 -->
			<el-table :data="addresslist" border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="姓名" prop="user_name"></el-table-column>
				<el-table-column label="地址" prop="address"></el-table-column>
				<el-table-column label="操作">
					<!-- 功能按钮 -->
					<template v-slot="scope">
						<el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
						<el-button type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)"></el-button>
						<!-- <el-button type="success" icon="el-icon-plus" @click="showAddDialog(scope.row.id)"></el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
			 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="list_count">
			</el-pagination>
			<!-- 添加地址对话框 -->
			<el-dialog title="添加地址" :visible.sync="addDialogVisible" width="30%">
				<!-- 添加表单区域 -->
				<span>
					<el-form label-width="65px" class="login_form" :model="addForm" ref="addRef">
						<el-form-item label="用户名" prop="name">
							<el-input placeholder="请输入用户名" v-model="addForm.name"></el-input>
						</el-form-item>

						<el-form-item label="地 址">
							<el-input placeholder="请输入地址" v-model="addForm.address"></el-input>
						</el-form-item>

					</el-form>
				</span>

				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addDialogVisible = false;addAddress()">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 修改地址对话框 -->
			<el-dialog title="修改地址" :visible.sync="editDialogVisible" width="30%">
				<!-- 添加表单区域 -->
				<span>
					<el-form label-width="65px" class="login_form" :model="editForm" ref="addRef">
						<!-- <el-form-item label="用户名" prop="name">
							<el-input v-model="editForm.name"></el-input>
						</el-form-item> -->

						<el-form-item label="地 址">
							<el-input v-model="editForm.address"></el-input>
						</el-form-item>

					</el-form>
				</span>

				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editDialogVisible = false;editAddress()">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 删除地址对话框 -->
			<el-dialog title="删除地址" :visible.sync="deleteDialogVisible" width="30%">
				<span>确定删除地址吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="deleteDialogVisible = false;deleteAddress()">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				deleteDialogVisible: false,
				addressId: -1,
				editDialogVisible: false,
				addDialogVisible: false,
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					// 这里的page_size的值要与上文中列表中可选值一致
					"page_size": 5,
					"query": ""
				},
				addresslist: [],
				list_count: 0,
				addForm: {
					"name": "",
					"address": ""
				},
				editForm: {
					"address": ""
				}
			}
		},
		created() {
			this.getaddresslist();
		},
		methods: {
			async getaddresslist() {
				const {
					data: res
				} = await this.$http.get('addressapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.addresslist = res.results;
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getaddresslist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				this.getaddresslist();
			},
			// async
			addAddress() {
				let data = new FormData();
				data.append('user_name', this.addForm.name);
				data.append('address', this.addForm.address);

				this.$http.post("addressapi/operation/?token=" + window.sessionStorage.getItem("token"), data)
					.then(res => {
						// console.log(res);
						this.$message.success("添加地址成功");
						this.getaddresslist();
					})
					.catch(res => {
						// console.log(res);
						this.$message.error("添加地址失败");
					});

			},
			
			async showEditDialog(id){
				this.editDialogVisible = true;
				this.addressId = id;
				let data = {
					"token": window.sessionStorage.getItem("token")
				}
				const {
					data: res
				} = await this.$http.get("addressapi/operation/" + id +"/", {params: data});
				// console.log(res);
				this.editForm.address = res.address;
			},
			async editAddress(){
				// let data = {
				// 	"token": 
				// }
				let url = "addressapi/operation/" + this.addressId +"/?token=" + window.sessionStorage.getItem("token");
				const {
					data: res
				} = await this.$http.patch(url, this.editForm);
				// console.log(res);
				if(res.id){
					this.$message.success("修改地址成功");
					this.getaddresslist();
				}else {
					this.$message.error("修改地址失败");
				}
			},
			showDeleteDialog(id){
				this.deleteDialogVisible = true;
				this.addressId = id;
			},
			async deleteAddress(){
				let url = "addressapi/operation/" + this.addressId +"/?token=" + window.sessionStorage.getItem("token");
				const {
					data: res
				} = await this.$http.delete(url);
				if(!res){
					this.$message.success("删除地址成功");
					this.query_info.page = 1;
					this.getaddresslist();
				}else {
					this.$message.error("删除地址失败");
				}
			}
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
</style>
